<template>
  <div class="headlines">
    <div class="hotImg">
      <img src="static/imgs/hotnews.png">
    </div>
    <div class="swiper-container">
      <ul class="clearfix swiper-wrapper">
        <li class="swiper-slide ui-ellipsis"
         v-for="(item,index) in headlines"
          :key="index">
            <a>
              <i class="lyf-icons icons-speaker"></i>
              <span class="">{{item.displayTitle}}</span>
            </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    headlines: Array
  },
  mounted() {
    new Swiper('.headlines .swiper-container',{
      direction : 'vertical',
      slidesPerView: 2,
      slidesPerGroup: 2,
      autoplay: 2000,
      loop: true,
      observer: true
    })
  }
}
</script>
<style lang="less" scoped>
.headlines{
  position: relative;
  padding-top: .1px;
  .hotImg{
    position: absolute;
    top: .15rem;
    left: .15rem;
    padding-right: .15rem;
    border-right: 1px solid #e5e5e5;
    img{
       width: .35rem;
    }
  }
  .swiper-container{
    margin: .15rem .2rem .13rem .8rem;
    height: .34rem;
  }
  .swiper-slide{
    height: .19rem;
    line-height: .19rem;
    i{
      margin-right: .07rem;
    }
  }
}

</style>
